<template>
	<view class="page pageBg">
		<v-header title="消息通知" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<!--导航栏切换-->
			<view class="tabNav f fb marginBot30">
				<view class="tabItem  " v-for="(item, index) in navTab" :key="index" @click="navTap(item, index)">
					<view class="tabItems f fc" :class="{ actname: navIndex == index }">{{ item.name }}</view>
					<view class="borderbot" v-if="navIndex == index"></view>
				</view>
			</view>

			<!--搜索-->
			<view class="searchCont  ">
		
				<view class="cell f fs">
					
					<view class="item2 f fc fl" v-for="(item, index) in read" :key="index" :class="{ item2Color: readIndex == index }" @click="redTap(item, index)">
						{{ item.name }}
					</view>
				</view>
				<view class="cell f fb">
					<view class="item2 f fc item2Color">近一个月</view>
					<view class="item2 f fc">近3个月</view>
					<view class="f fl fb picker bolor">
						<input @click="onShowDatePicker('range')" class="fl  dateinput" :value="chosetime" disabled placeholder="请选择审批日期" placeholder-style="color:#ccc" />
						<text class="cuIcon-calendar xolor"></text>
					</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true" @confirm="onSelected" @cancel="onCancel" />
			<!--列表-->
			<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh1">
				<view class="list-cell" v-for="(item, index) in list" :key="index" @click="toMessageDetail">
					<view class="title f fb">
						<view class="f fl">
							<!-- <view class="borderlet"></view> -->
							<view class="oneLine titleW">{{ item.title }}</view>
						</view>
						<view class="stats f fc nostats " :class="{ ystats: item.status == 1 }">{{ item.statusNmae }}</view>
					</view>
					<view class="cont">
						<view class="status">
							<label>消息内容:</label>
							{{ item.name }}
						</view>
						<view class="status">
							<label>创建时间:</label>
							{{ item.time }}
						</view>
					</view>
					<view class="czBtn padTop f fa">
						<view class="combtn f fc bg3">查看</view>

						<!-- 	<view class="combtn f fc bg1">
							抓取
						</view> -->
					</view>
				</view>
				<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
			</scroll-view>
			<view v-else class="f fc fn nodata">
				<view class="img"></view>
				<view class="text">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import loadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		loadMore,
		MxDatePicker
	},
	data() {
		return {
			loadingType: 0, // 0 还有数据可以加载  , 1 重新加载， 2 没有更多了
			h: this.$h,
			navIndex: 0,
			navTab: [
				{
					state: 0,
					name: '业务通知'
				},
				{
					state: 1,
					name: '缴款通知'
				},
				{
					state: 2,
					name: '合同提醒'
				}
			],
			readIndex: 0,
			read: [
				{
					status: 0,
					name: '已读'
				},
				{
					status: 1,
					name: '未读'
				}
			],
			list: [
				{
					id: 1,
					status: 0,
					statusNmae: '未读',
					title: '企业如福利一次',
					name: '北京文化科技有限公司提交的企业入驻合同已生效，合同编号为BJ-2020-XR-0031已于2020-09-16 11:09:51生效1',
					time: '2021-1-1'
				},
				{
					id: 2,
					status: 1,
					statusNmae: '已读',
					title: '北京文化科技有限公司提交的企业入驻合同已生效，合同编号为BJ-2020-XR-',
					name: '北京文化科技有限公司提交的企业入驻合同已生效，合同编号为BJ-2020-XR-2',
					time: '2021-1-1'
				},
				{
					id: 3,
					status: 0,
					statusNmae: '未读',
					title: '企业如福利一次',
					name: '北京文化科技有限公司提交的企业入驻合同已生效，合同编号为BJ-2020-XR-3',
					time: '2021-1-1'
				}
			],
			//日期选择器范围
			showPicker: false,
			range: [],
			type: 'rangetime',
			value: '',
			chosetime: ''
		};
	},
	methods: {
		navTap(item, index) {
			this.navIndex = index;
		},
		redTap(item, index) {
			this.readIndex = index;
		},
		//去消息中心详情
		toMessageDetail() {
			uni.navigateTo({
				url: '../../views/message/messageDetail'
			});
		},
		//选择日期
		onShowDatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		onSelected(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				this.chosetime = e.value[0] + ' - ' + e.value[1];
			}
		},
		onCancel(e) {
			//选择
			this.showPicker = false;
			this[this.type] = '';
			this.chosetime = '';
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/approval.scss';
.lineh1 {
	width: 100%;
	height: calc(100% - 315rpx);
	// border: 1px solid #f00;
	box-sizing: border-box;
}
</style>
